<template>
	<view :style="themeColor">
		<view class="page" :style="{backgroundImage: 'url(' + detailsInfo.image + ')'}">
			<view class="flex benben-position-layout flex flex-wrap align-center courseDetail_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub courseDetail_fd0_0'>
					<view class='flex flex-wrap align-center courseDetail_fd0_0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  courseDetail_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
					</view>
					<view class='flex flex-wrap align-center justify-end courseDetail_fd0_0_c0' @tap.stop="getCollect">
						<image v-if="detailsInfo.is_collection == 0" class='courseDetail_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"151.png"'></image>
						<image v-else class='courseDetail_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"165.png"'></image>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<view class="loading_css" v-if="isShow">
				<u-loading size="36" color="#E60012"></u-loading>
				<view>加载中</view>
			</view>
			<template v-else>
				<view class="flex benben-flex-layout flex-wrap align-center courseDetail_flex_1">
					<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
						<text class='courseDetail_fd1_0_c0'>{{detailsInfo.title}}</text>
						<view class='flex flex-wrap align-center flex-sub courseDetail_fd1_0_c1'>
							<text class='courseDetail_fd1_0_c1_c0'>讲师名称：{{detailsInfo.lecturer}}</text>
				
							<view class='flex  courseDetail_fd1_0_c1_c1'></view>
							<text class='courseDetail_fd1_0_c1_c0'>{{detailsInfo.course_hour}}课时</text>
						</view>
					</view>
				</view>

				<view class="flex flex-direction align-stretch benben-flex-layout courseDetail_flex_2">
					<view class='flex flex-direction flex-wrap align-stretch flex-sub courseDetail_fd2_0' v-for="(item,index) in section" :key="index">
						<view class='flex flex-wrap align-center justify-between flex-sub courseDetail_fd2_0_c0' @tap.stop="selectSection(index)">
							<view class='courseDetail_fd2_0_c0_c0'>{{item.title}}</view>
							<image v-if="!item.isSelect" class='courseDetail_fd2_0_c0_c1' mode="aspectFit" :src='STATIC_URL+"153.png"'></image>
							<image v-else class='courseDetail_fd2_0_c0_c1' mode="aspectFit" :src='STATIC_URL+"152.png"'></image>
						</view>
						<view class='flex flex-direction align-stretch courseDetail_fd2_0_c1' v-if="item.child.length > 0 && item.isSelect">
							<view class='flex flex-wrap align-center flex-sub courseDetail_fd2_0_c1_c0' v-for="(v, k) in item.child" :key="k">
								<view class='flex flex-direction align-stretch flex-sub'>
									<view>
										<text class='courseDetail_fd2_0_c1_c0_c0_c0_c0' v-if="v.type == 1">视频</text>
										<text class='courseDetail_fd2_0_c1_c1_c0_c0_c0' v-if="v.type == 2">文件</text>
										<text class='courseDetail_fd2_0_c1_c0_c0_c0_c1'>{{v.name}}</text>
									</view>
									<view class='flex align-center courseDetail_fd2_0_c1_c0_c0_c1'>
										<text style="margin-right: 12rpx;" class='courseDetail_fd2_0_c1_c0_c0_c1_c0' v-if="v.schedule">{{v.schedule}}</text>
										<text v-if="v.type == 1" class='courseDetail_fd2_0_c1_c0_c0_c1_c1'>时长：{{v.duration}}分钟</text>
										<text v-if="v.type == 2" class='courseDetail_fd2_0_c1_c0_c0_c1_c1'>需要学习时长：{{v.learning_duration}}分钟</text>
									</view>
								</view>
								<view class='flex flex-wrap align-center justify-center courseDetail_fd2_0_c1_c0_c1' v-if="v.study_status == 2" @tap.stop="goStudy(v.type, v.aid, v.file_url, v.name, v.current_duration)">
									<text class='courseDetail_fd2_0_c1_c0_c0_c1_c0'>重新学习</text>
								</view>
								<view class='flex flex-wrap align-center justify-center courseDetail_fd2_0_c1_c1_c1' v-if="v.study_status == 1" @tap.stop="goStudy(v.type, v.aid, v.file_url, v.name, v.current_duration)">
									<text class='courseDetail_fd2_0_c1_c1_c1_c0'>继续学习</text>
								</view>
								<view class='flex flex-wrap align-center justify-center courseDetail_fd2_0_c1_c2_c1' v-if="v.study_status == 0" @tap.stop="goStudy(v.type, v.aid, v.file_url, v.name, v.current_duration)">
									<text class='courseDetail_fd2_0_c1_c2_c1_c0'>开始学习</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				isShow: true,
				id: "",
				detailsInfo: {},
				section: [],
				benMusic: "",
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {id} = options;
			if (id !== undefined) this.id = id;
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getCourseDetail();
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取课程详情  post65dd84601164f
			getCourseDetail() {
				this.$api.post(global.apiUrls.post65dd84601164f, {
					course_id: this.id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.detailsInfo = res.data.data.info;
						this.section = res.data.data.section;
						if (this.section.length > 0) {
							this.section.forEach((v, k) => {
								v.isSelect = false;
							})
							this.section[0].isSelect = true;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			selectSection(index) {
				if (this.section[index].child.length > 0) {
					this.section[index].isSelect = !this.section[index].isSelect;
					this.$forceUpdate();
				}
			},
			// 收藏课程  post65dd866cd9dc7
			getCollect() {
				this.$api.post(global.apiUrls.post65dd866cd9dc7, {
					course_id: this.id
				}).then(res => {
					// console.log(res);
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						if (res.data.data.is_collection == 1) {
							this.detailsInfo.is_collection = 1;
						} else {
							this.detailsInfo.is_collection = 0;
						}
					}
				})
			},
			goStudy(type, aid, file_url, name, current_duration) {
				uni.setStorageSync('fileUrl', file_url[0]);
				if (type == 1) {
					uni.navigateTo({
						url: '/pages/homePage/seeVideo/seeVideo?id=' + aid + '&name=' + name + '&course_id=' + this.id + '&watchTime=' + current_duration
					})
				} else if (type == 2) {
					uni.navigateTo({
						url: '/pages/homePage/seeVideo/pdf?id=' + aid + '&name=' + name + '&course_id=' + this.id
					})
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background-repeat: no-repeat;
		background-size: 100% 460rpx;
	}

	.courseDetail_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
	}

	.courseDetail_fd0_0_c2_c0 {
		width: 48rpx;
		height: 48rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.courseDetail_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: var(--benbenFontColor3);
	}

	.courseDetail_fd0_0_c0 {
		width: 120rpx;
	}

	.courseDetail_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.courseDetail_flex_1 {
		background: #fff;
		margin: 320rpx 0rpx 0rpx 0rpx;
		background-size: 100% auto;
		padding: 32rpx 36rpx 32rpx 36rpx;
	}

	.courseDetail_fd1_0_c1_c1 {
		background: #999;
		width: 2rpx;
		height: 20rpx;
		margin: 0rpx 20rpx 0rpx 20rpx;
		transform: scaleX(0.5);
	}

	.courseDetail_fd1_0_c1_c0 {
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);
	}

	.courseDetail_fd1_0_c1 {
		margin: 20rpx 0rpx 0rpx 0rpx;
	}

	.courseDetail_fd1_0_c0 {
		font-size: 32rpx;
		font-weight: 500;
	}

	.courseDetail_flex_2 {
		padding: 32rpx 36rpx 0rpx 36rpx;
	}

	.courseDetail_fd2_0_c1_c2_c1_c0 {
		font-size: 24rpx;
		color: rgba(230, 0, 18, 1);
	}

	.courseDetail_fd2_0_c1_c2_c1 {
		background: #FDE5E6;
		width: 164rpx;
		height: 56rpx;
		background-size: 100% auto;
		border-radius: 16rpx;
	}

	.courseDetail_fd2_0_c1_c1_c1_c0 {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 1);
	}

	.courseDetail_fd2_0_c1_c1_c1 {
		background: #E60012;
		width: 164rpx;
		height: 56rpx;
		background-size: 100% auto;
		border-radius: 16rpx;
	}

	.courseDetail_fd2_0_c1_c1_c0_c0_c0 {
		display: inline-block;
		background: #2A8FEE;
		width: 54rpx;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 20rpx;
		color: var(--benbenFontColor3);
		text-align: center;
		vertical-align: baseline;
		border-radius: 8rpx;
	}

	.courseDetail_fd2_0_c1_c0_c1 {
		background: #F6F7F9;
		width: 164rpx;
		height: 56rpx;
		background-size: 100% auto;
		border-radius: 16rpx;
	}

	.courseDetail_fd2_0_c1_c0_c0_c1_c1 {
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);
		// margin: 0rpx 0rpx 0rpx 12rpx;
	}

	.courseDetail_fd2_0_c1_c0_c0_c1_c0 {
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);
	}

	.courseDetail_fd2_0_c1_c0_c0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
	}

	.courseDetail_fd2_0_c1_c0_c0_c0_c1 {
		margin: 0rpx 0rpx 0rpx 10rpx;
		font-size: 28rpx;
		width: 80%;
	}

	.courseDetail_fd2_0_c1_c0_c0_c0_c0 {
		display: inline-block;
		background: #E60012;
		width: 54rpx;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 20rpx;
		color: var(--benbenFontColor3);
		text-align: center;
		vertical-align: baseline;
		border-radius: 8rpx;
	}

	.courseDetail_fd2_0_c1_c0 {
		border-bottom: 1px solid #eee;
		padding: 0rpx 0rpx 18rpx 0rpx;
		margin: 0rpx 0rpx 18rpx 0rpx;
	}

	.courseDetail_fd2_0_c1 {
		border-top: 1px solid #eee;
		padding: 18rpx 18rpx 18rpx 24rpx;
	}

	.courseDetail_fd2_0_c0_c1 {
		width: 48rpx;
		height: 48rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.courseDetail_fd2_0_c0_c0 {
		font-size: 28rpx;
		font-weight: 500;
		width: calc(100% - 48rpx);
	}

	.courseDetail_fd2_0_c0 {
		// border-bottom: 1px solid #eee;
		padding: 20rpx 24rpx 20rpx 24rpx;
	}

	.courseDetail_fd2_0 {
		background: #fff;
		background-size: 100% auto;
		border-radius: 16rpx;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}
</style>